﻿<script setup lang="ts" name="SeamlessScroll">
import { templateRef, useResizeObserver, useDebounceFn } from '@vueuse/core'
import useScrollPosition from '@/hooks/scrollPosition'
import { storeToRefs } from 'pinia'
import { useSystemConfigStore } from '@/store/storage/systemConfigStore'
import { getListData } from '@/api/seamlessScroll'
const route = useRoute()

const systemConfigStore = useSystemConfigStore()
const { systemConfig } = storeToRefs(systemConfigStore)

// 滚动行为
useScrollPosition(route)

const scroll1 = ref(null)
const scroll2 = ref(null)
const scroll3 = ref(null)
const scroll4 = ref(null)
const scroll5 = ref(null)
const scroll6 = ref(null)
const scroll7 = ref(null)
const scroll8 = ref(null)
const scroll9 = ref(null)
const scroll10 = ref(null)

const customOption1 = reactive({
  direction: 'top',
  key: 0
})
const customOption2 = reactive({
  step: 1,
  direction: 'top',
  singleHeight: 30,
  waitTime: 800,
  key: 1
})
const customOption3 = reactive({
  step: 2,
  direction: 'bottom',
  key: 2
})
const customOption4 = reactive({
  step: 3,
  direction: 'left',
  key: 3
})
const customOption5 = reactive({
  step: 5,
  direction: 'left',
  singleWidth: 0,
  waitTime: 1000,
  switchDelay: 10,
  key: 4
})
const customOption6 = reactive({
  direction: 'right',
  key: 5
})

const customOption7 = reactive({
  step: 1,
  direction: 'top',
  singleHeight: 30,
  waitTime: 800,
  key: 6
})

const customOption8 = reactive({
  step: 1,
  direction: 'bottom',
  singleHeight: 30,
  waitTime: 800,
  key: 7
})

const customOption9 = reactive({
  step: 1,
  direction: 'top',
  singleHeight: 30,
  waitTime: 800,
  autoPlay: true,
  navigation: true,
  switchSingleStep: 30,
  key: 8
})
const customOption10 = reactive({
  step: 1,
  direction: 'left',
  singleWidth: 220,
  waitTime: 800,
  autoPlay: true,
  navigation: true,
  switchSingleStep: 220,
  key: 9
})

const cardRef = templateRef<HTMLElement | null>('cardRef', null)
const itemWidth = ref(0)
// 监听元素尺寸变化
useResizeObserver(
  cardRef,
  useDebounceFn(() => {
    getCustomOption5ItemWidth()
  }, 200)
)
const getCustomOption5ItemWidth = () => {
  itemWidth.value = cardRef.value.offsetWidth
  const scroll5Dom = unref(scroll5)
  if (!scroll5Dom) return
  scroll5Dom.reset()
  unref(customOption5).singleWidth = itemWidth.value
}

const listData: any = ref([])

const getInitData = () => {
  getListData(null, { config: { showLoading: false, mockEnable: true } }).then((res: any) => {
    if (res.data) {
      listData.value = res.data
      unref(scroll1).reset()
      unref(scroll2).reset()
      unref(scroll3).reset()
      unref(scroll4).reset()
      unref(scroll5).reset()
      unref(scroll6).reset()
      unref(scroll7).reset()
      unref(scroll8).reset()
      unref(scroll9).reset()
      unref(scroll10).reset()
    }
  })
}
onMounted(() => {
  getInitData()
})
</script>

<template>
  <el-space :size="systemConfig.space" fill direction="vertical">
    <el-row :gutter="systemConfig.space">
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>无缝滚动示例-上行</span>
            </div>
          </template>
          <VueSeamlessScroll ref="scroll1" :data="listData" :custom-option="customOption1" class="warp">
            <ul class="item">
              <li v-for="(item, index) in listData" :key="index">
                <span class="title" v-text="(index + 1) + ' - ' + item.title" />
              </li>
            </ul>
          </VueSeamlessScroll>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>无缝滚动示例-上行单步</span>
            </div>
          </template>
          <VueSeamlessScroll ref="scroll2" :data="listData" :custom-option="customOption2" class="warp">
            <ul class="item">
              <li v-for="(item, index) in listData" :key="index">
                <span class="title" v-text="(index + 1) + ' - ' + item.title" />
              </li>
            </ul>
          </VueSeamlessScroll>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>无缝滚动示例-下行</span>
            </div>
          </template>
          <VueSeamlessScroll ref="scroll3" :data="listData" :custom-option="customOption3" class="warp">
            <ul class="item">
              <li v-for="(item, index) in listData" :key="index">
                <span class="title" v-text="(index + 1) + ' - ' + item.title" />
              </li>
            </ul>
          </VueSeamlessScroll>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>无缝滚动示例-单行左行</span>
            </div>
          </template>
          <VueSeamlessScroll ref="scroll4" :data="listData" :custom-option="customOption4" class="list">
            <ul class="item">
              <li v-for="(item, index) in listData" :key="index">
                <span class="title" v-text="(index + 1) + ' - ' + item.title" />
              </li>
            </ul>
          </VueSeamlessScroll>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
        <el-card class="box-card">
          <template #header>
            <div ref="cardRef" class="card-header">
              <span>无缝滚动示例-单行左行单步</span>
            </div>
          </template>
          <VueSeamlessScroll ref="scroll5" :data="listData" :custom-option="customOption5" class="step-horizontal list">
            <ul class="item">
              <li v-for="(item, index) in listData" :key="index" :style="{ width: itemWidth + 'px' }">
                <span class="title" v-text="(index + 1) + ' - ' + item.title" />
              </li>
            </ul>
          </VueSeamlessScroll>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>无缝滚动示例-单行右行</span>
            </div>
          </template>
          <VueSeamlessScroll ref="scroll6" :data="listData" :custom-option="customOption6" class="list">
            <ul class="item">
              <li v-for="(item, index) in listData" :key="index">
                <span class="title" v-text="(index + 1) + ' - ' + item.title" />
              </li>
            </ul>
          </VueSeamlessScroll>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>无缝滚动示例-单行上行单步</span>
            </div>
          </template>
          <VueSeamlessScroll ref="scroll7" :data="listData" :custom-option="customOption7" class="step-list">
            <ul class="item">
              <li v-for="(item, index) in listData" :key="index">
                <span class="title" v-text="(index + 1) + ' - ' + item.title" />
              </li>
            </ul>
          </VueSeamlessScroll>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>无缝滚动示例-单行下行单步</span>
            </div>
          </template>
          <VueSeamlessScroll ref="scroll8" :data="listData" :custom-option="customOption8" class="step-list">
            <ul class="item">
              <li v-for="(item, index) in listData" :key="index">
                <span class="title" v-text="(index + 1) + ' - ' + item.title" />
              </li>
            </ul>
          </VueSeamlessScroll>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>无缝滚动示例-单行单步点击上下行</span>
            </div>
          </template>
          <VueSeamlessScroll ref="scroll9" :data="listData" :custom-option="customOption9" class="switch-list step-list">
            <template #left-switch>
              <svg-icon icon="ep:arrow-left"></svg-icon>
            </template>
            <template #right-switch>
              <svg-icon icon="ep:arrow-right"></svg-icon>
            </template>
            <ul class="item">
              <li v-for="(item, index) in listData" :key="index">
                <span class="title" v-text="(index + 1) + ' - ' + item.title" />
              </li>
            </ul>
          </VueSeamlessScroll>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>无缝滚动示例-单行单步点击左右行</span>
            </div>
          </template>
          <VueSeamlessScroll ref="scroll10" :data="listData" :custom-option="customOption10" class="switch-list img-list">
            <template #left-switch>
              <svg-icon icon="ep:arrow-left"></svg-icon>
            </template>
            <template #right-switch>
              <svg-icon icon="ep:arrow-right"></svg-icon>
            </template>
            <ul class="item">
              <li v-for="(item, index) in listData" :key="index">
                <img :src="item.img" alt="" />
              </li>
            </ul>
          </VueSeamlessScroll>
        </el-card>
      </el-col>
    </el-row>
  </el-space>
</template>

<style scoped lang="scss">
.el-space {
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}

.el-row {
  margin-top: calc(0px - var(--el-space));

  .el-col {
    margin-top: var(--el-space);
  }
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  span {
    margin-right: 20px;
  }
}

.warp {
  width: 100%;
  height: 240px;
  margin: 0 auto;

  :deep(.seamless-box) {
    width: 100%;
  }

  ul {
    margin: 0 auto;
    padding: 0;
    list-style: none;

    li {
      width: 100%;
      height: 30px;
      overflow: hidden;
      font-size: 15px;
      line-height: 30px;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}

.step-horizontal {
  ul {
    li {
      margin-right: 0 !important;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}

.list {
  width: 100%;
  height: 30px;
  margin: 0 auto;

  ul {
    margin: 0 auto;
    padding: 0;
    white-space: nowrap;
    list-style: none;

    li {
      display: inline-block;
      height: 30px;
      margin-right: 20px;
      font-size: 15px;
      line-height: 30px;
    }
  }
}

.step-list {
  width: 100%;
  height: 30px;
  margin: 0 auto;

  :deep(.seamless-box) {
    width: 100%;
  }

  ul {
    margin: 0 auto;
    padding: 0;
    list-style: none;

    li {
      width: 100%;
      height: 30px;
      overflow: hidden;
      font-size: 15px;
      line-height: 30px;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}

.switch-list {

  :deep(.prev),
  :deep(.next) {
    top: calc(0px - (var(--el-space) * 2 - 2px + 26px));
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    line-height: 30px;
    text-align: center;
    border: 1px solid var(--el-border-color-light);
    border-radius: 100%;
    cursor: pointer;

    &.disabled,
    &.disabled:hover {
      color: var(--el-text-color-disabled);
      background: none;
      cursor: not-allowed;
    }

    &:hover {
      color: var(--el-color-white);
      background-color: var(--el-color-primary);
    }
  }

  :deep(.prev) {
    right: 40px;
  }

  :deep(.next) {
    right: 0;
  }
}

.img-list {
  width: 100%;
  height: 100px;
  margin: 0 auto;

  :deep(.seamless-box) {
    width: 100%;
  }

  ul {
    margin: 0 -10px;
    padding: 0;
    white-space: nowrap;
    list-style: none;

    li {
      display: inline-block;
      width: 220px;
      height: 100px;
      overflow: hidden;

      img {
        display: block;
        width: 200px;
        margin: 0 10px;
      }
    }
  }
}
</style>
